<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <meta charset="utf-8">
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      div ul {margin: 10px;}
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      #messages { margin-bottom: 40px }
      #master_price div {float: left; margin-right: 10px; font-size:13px;}
      #master_eth_price div {float: left; margin-right: 10px; font-size:13px;}
      #master_ltc_price div {float: left; margin-right: 10px; font-size:13px;}
      .clearfix { clear:both; }
        .yubaozhou p { margin-bottom: 10px; display: none; }
    </style>
  </head>
  <body>
  <div>
    <div style="width: 30%; float: left;">

      <ul><div><span>美元汇率:</span><input id="usd_huilv" autocomplete="off" value="7.9" /></div></ul>
      <ul><div><span>本金数量:</span><input id="m" autocomplete="off" value="10000" /></div></ul>
      <ul><div class="yubaozhou"><p>顶礼本师释迦摩尼佛,顶礼文殊智慧勇士</p>
        <p>雨宝咒:</p>
        <p>曩(nǎng)谟(mó)婆(pó)誐(ě)嚩(mó)帝(dì)</p>
        <p>嚩(mó)日(rì)啰(luo)驮(tuó)啰(luo)</p>
        <p>娑(suō)誐(ě)啰(luo)捏(niē)</p>
        <p>具(jù)洒(sǎ)耶(yē)</p>
        <p>怛(dá)他(tā)蘖（nie）多(duō)野(yě)</p>
        <p>怛(dá)儞(nǐ)也(yě)他(tā)</p>
        <p>唵(hong)素(sù)噜(lū)闭(bì)</p>
        <p>跋(bá)捺(nà)啰(luo)嚩(mó)</p>
        <p>底(dǐ)矒(méng)誐(ě)</p>
        <p>阿(ā)左(zuǒ)隶（li）</p>
        <p>阿(ā)左(zuǒ)跛(bǒ)隶（li）</p>
        <p>嗢(wà)伽(gā)跢(duò)儞(nǐ)</p>
        <p>嗢(wà)陛(bì)娜(nà)儞(nǐ)</p>
        <p>萨(sà)写(xiě)嚩(mó)底(dǐ)</p>
        <p>驮(tuó)娘(niáng)嚩(mó)底(dǐ)</p>
        <p>驮(tuó)曩(nǎng)嚩(mó)底(dǐ)</p>
        <p>室(shì)唎(lī)么(me)底(dǐ)</p>
        <p>钵(bō)啰(luo)婆(pó)嚩(mó)底(dǐ)</p>
        <p>阿(ā)么(me)隶（li）</p>
        <p>尾(wěi)么(me)黎(lí)噜(lū)噜(lū)</p>
        <p>素(sù)噜(lū)闭(bì)</p>
        <p>尾(wěi)么(me)黎(lí)</p>
        <p>阿(ā)娜(nà)多(duō)悉(xī)帝(dì)</p>
        <p>尾(wěi)娜(nà)多(duō)悉(xī)帝(dì)</p>
        <p>尾(wěi)湿(shī)嚩(mó)计(jì)始(shǐ)</p>
        <p>鸯(yāng)矩(jǔ)隶（li）</p>
        <p>矒(méng)矩(jǔ)隶（li）</p>
        <p>地(dì)地(dì)冥(míng)</p>
        <p>度(dù)度(dù)冥(míng)</p>
        <p>跢(duò)跢(duò)隶（li）</p>
        <p>多(duō)啰(luo)多(duō)啰(luo)嚩(mó)日(rì)隶（li）</p>
        <p>阿(ā)韈（wa）跢(duò)儞(nǐ)</p>
        <p>步(bù)计(jì)屋(wū)计(jì)</p>
        <p>咤(zhà)计(jì)咤(zhà)计(jì)</p>
        <p>韈（wa）啰(luo)洒(sǎ)尼(ní)</p>
        <p>儞(nǐ)涩(sè)播(bō)娜(nà)儞(nǐ)</p>
        <p>婆(pó)誐(ě)挽(wǎn)</p>
        <p>嚩(mó)日(rì)啰(luo)驮(tuó)啰(luo)</p>
        <p>娑(suō)誐(ě)啰(luo)</p>
        <p>捏(niē)具(jù)衫(shān)</p>
        <p>怛(dá)他(tā)蘖(niè)跢(duò)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)么(me)啰(luo)娑(suō)么(me)啰(luo)</p>
        <p>萨(sà)嚩(mó)怛(dá)他(tā)孽(niè)跢(duò)萨(sà)底(dǐ)也(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>僧(sēng)伽(gā)萨(sà)底(dǐ)也(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>怛(dá)咤(zhà)怛(dá)咤(zhà)</p>
        <p>布(bù)啰(luo)布(bù)啰(luo)</p>
        <p>布(bù)啰(luo)也(yě)布(bù)啰(luo)野(yě)</p>
        <p>婆(pó)啰(luo)婆(pó)啰(luo)</p>
        <p>婆(pó)啰(luo)抳(nǐ)</p>
        <p>素(sù)矒(méng)誐(ě)丽(lì)</p>
        <p>扇(shàn)跢(duò)么(me)底(dǐ)</p>
        <p>瞢(méng)誐(ě)攞(luǒ)么(me)底(dǐ)</p>
        <p>钵(bō)啰(luo)婆(pó)么(me)底(dǐ)</p>
        <p>摩(mó)诃(hē)么(me)底(dǐ)</p>
        <p>素(sù)婆(pó)捺(nà)啰(luo)嚩(mó)底(dǐ)</p>
        <p>阿(ā)蘖(niè)蹉(cuō)阿(ā)蘖(niè)蹉(cuō)</p>
        <p>三(sān)么(me)野(yě)么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>阿(ā)驮(tuó)啰(luo)拿(ná)</p>
        <p>么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>钵(bō)啰(luo)婆(pó)嚩(mó)么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>驮(tuó)哩(lǐ)底(dǐ)么(me)弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>尾(wěi)惹(rě)野(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
        <p>萨(sà)嚩(mó)萨(sà)</p>
        <p>怛(dá)嚩(mó)尾(wěi)惹(rě)野(yě)么(me)</p>
        <p>弩(nǔ)娑(suō)么(me)啰(luo)</p>
        <p>娑(suō)嚩(mó)贺(hè)</p>
      </div></ul>
    </div>
    <div style="float: left; padding: 10px; width:70%">
      <ul id="messages" >
          <div style="margin-top: 10px;float: left">
              <ul>
                  <li><div><span>coinone_btc_sell:</span><input id="coinone_btc_num" autocomplete="off" value="1.0" /><button id="btn_coinone_btc" name="cal_btn">calculate</button></div></li>
                  <li><label>挂单价:</label><span id="coinone_btc_sell_price"></span>&nbsp;&nbsp;<label>利润估算:</label><span id="coinone_btc_sell_benefit"></span></li>
                <li><div><span>coinone_eth_sell:</span><input id="coinone_eth_num" autocomplete="off" value="1.0" /><button id="btn_coinone_eth" name="cal_btn">calculate</button></div></li>
                  <li><label>挂单价:</label><span id="coinone_eth_sell_price"></span>&nbsp;&nbsp;<label>利润估算:</label><span id="coinone_eth_sell_benefit"></span></li>
              </ul>
          </div>
          <div class="clearfix"></div>
      </ul>
    </div>
  </div>
    <script src="../static/socket.io.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $(function () {
        $.ajaxSetup({
            cache:false
        });
        $("button[name='cal_btn']").each(
              function(){
                $(this).click(function () {
                  basename = $(this).attr("id").substring(4,$(this).attr("id").length);
                  $.post( "{{host_url}}" + basename + "_sell_cal", {
                    "benjin":$('#m').val(),
                    "usd_huilv" : $('#usd_huilv').val(),
                    "coinnum" : $('#' + basename + '_num').val(),
                    "csrf_token" : "{{ csrf_token() }}"
                  }).done(function( data ) {
                    obj = JSON.parse(data);
                    $.each( obj, function( key, value ) {
                      $('#'+ key).text(value);
                    });
                  });
                });
              }
        );

//        .click(function () {
//          socket.emit('chat message', $('#m').val() + "," + $('#usd_huilv').val() + "," + $('#kwrnum').val());
//          //$('#m').val('');
//          return false;
//        });
      });
    </script>
  </body>
</html>